
// 企业信息
<template>
  <!-- 企业信息 -->
  <div class="changeAvatar">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="公司名称" prop="companyName">
        <el-input
          type="text"
          v-model="ruleForm.companyName"
          auto-complete="off"
          placeholder="请输入公司名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="公司性质" prop="companyNature">
        <el-select v-model="ruleForm.companyNature.name" placeholder="请选择公司性质">
          <el-option
            v-for="item in ruleForm.companyNature"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所属行业" prop="industry">
        <el-select v-model="ruleForm.industry.name" placeholder="请选择所属行业">
          <el-option
            v-for="item in ruleForm.industry"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="营业执照" prop="businessLicense">
        <!-- 实验开始 -->
        <el-upload
          action
          :auto-upload="false"
          list-type="picture-card"
          ref="upload1"
          :limit="1"
          :on-progress="base64"
          :on-exceed="onExceed"
          accept="image/jpeg, image/jpg, image/png"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!-- 实验结束 -->
        <!-- <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          ref="upload2"
          :limit="1"
          :on-exceed="onExceed"
          :on-progress="base64"
          accept="image/jpeg, image/jpg, image/png"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload> -->
        <p class="tips" style="color: #f40; font-size:12px; text-align: left;">*上传图片不得超过2M</p>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt>
        </el-dialog>
        <p style="font-size：12px;color:#9d9d9d">无营业执照请上传相关证明（支持：jpg,jpeg,png格式图片）</p>
      </el-form-item>

      <el-form-item>
        <!--升级为企业用户 提交-->
        <!--****************判断这个用户是否为企业用户 为展现不同的按钮 聪儿展现 使用不同的接口****************-->
        <!-- 修改企业资料 -->
        <el-button
          v-if="this.$store.state.userStatus"
          class="register"
          type="primary"
          style="width:300px"
          :disabled="disabled"
          @click="submitForm(ruleForm)"
        >提 交</el-button>

        <!--升级企业用户 提交-->
        <el-button
          v-else
          class="register"
          type="warning"
          style="width:300px"
          :disabled="disabled"
          @click="ModifyingData(ruleForm)"
        >升 级</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "myCenter",
  data() {
    return {
      // 企业信息
      disabled: false, // 按钮点击的提交事件
      dialogImageUrl: "", // 营业执照的暂存路径
      dialogVisible: false, // 营业执照的
      ruleForm: {
        companyName: "", // 公司名称
        companyNature: [], //公司性质
        industry: [], //所属行业
        businessLicense: "" // 营业执照
      },
      rules: {
        companyName: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur"
          },
          {
            min: 2,
            message: "请输入正确的公司名称",
            trigger: "blur"
          }
        ],
        industry: [
          {
            required: true,
            message: "请选择所属行业",
            trigger: "blur"
          }
        ],
        businessLicense: [
          {
            required: true,
            message: "请上传营业执照",
            trigger: "blur"
          }
        ]
      },

      formLabelWidth: "120px"
    }
  },

  methods: {
    // 获取公司信息
    async getInfor() {
      let user_id = this.$store.state.UserInfor.user_id
      let status = "company"
      try {
        let infor = await this.$http({
          method: "post",
          url: "index/web/doSelfInfos",
          data: {
            user_id,
            status
          }
        })
        if (infor.data.State.Code == 200) {
          this.ruleForm.companyName = infor.data.data.name
          this.ruleForm.companyNature.name = infor.data.data.nature
          this.ruleForm.industry.name = infor.data.data.industry
          this.$store.commit('license', infor.data.data.license)
          // console.log(infor.data.data.license)
          // 纳税人证明的显示与隐藏
          this.$store.commit('Taxpayer', true)
          this.$store.commit('prove', infor.data.data.prove)
        } else if (infor.data.State.Code == 2005) {
          this.$store.commit('Taxpayer', false)
        }
        // const myInfor = infor.data
        // console.log(myInfor)
      } catch (error) {
        console.log("获取公司信息接口出现问题...")
      }
    },

    // 数据初始化 (公司性质 所属行业)
    httpInit() {
      try {
        this.$http
          .post("index/common/getNature")
          .then(res => {
            let reqdata = res.data
            if (reqdata.State.Code == 200) {
              this.ruleForm.companyNature = Array.from(reqdata.data)
            }
          })
          .catch(err => {
            console.log("getNature 出错")
          })

        this.$http
          .post("index/common/getIndustry")
          .then(res => {
            let reqdata = res.data
            if (reqdata.State.Code == 200) {
              this.ruleForm.industry = Array.from(reqdata.data)
            }
          })
          .catch(err => {
            console.log("getIndustry 出错")
          })
      } catch (error) {
        console.log("公司性质 所属行业 接口出现问题...")
      }

      // console.log(this.$store.state.UserInfor)
    },

    // 图片超过限定数量的钩子函数
    onExceed(files, fileList) {
      this.$message({
        message: "温馨提示:上传图片最多为一张 请勿重复点击...",
        type: "warning"
      })
    },

    // 图片格式转换方法
    // 实验开始   
    base64() {
      let url = document.getElementsByClassName('el-upload-list__item-thumbnail')[0].src
      this.ruleForm.businessLicense = this.imgbase64(url)
    },
    // 实验结束

    // 数据初始化
    async dataInit() {
      // 职业部门
      this.$http("index/common/getDepartment")
        .then(res => {
          let DATA = res.data
          if (DATA.State.Code == 200) {
            this.ruleForm.region = DATA.data
            console.log(region)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 删除上传的图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },

    // 图片预览营业执照
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 个人用户升级为企业用户
    ModifyingData(formName) {
      this.base64()
      if (
        formName.companyName &&
        this.ruleForm.industry.name &&
        this.ruleForm.companyNature.name &&
        formName.businessLicense
      ) {
        // 不能为空
        const UserInfor = this.$store.state.UserInfor
        const user_id = UserInfor.user_id
        let param = {
          phone: UserInfor.phone,
          name: formName.companyName,
          industry_id: this.ruleForm.industry.name,
          nature_id: this.ruleForm.companyNature.name,
          license: formName.businessLicense
        }
        // console.log(param)
        try {
          this.$http({
            method: "post",
            url: `index/index/userMoveUp`,
            headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
            data: {
              param,
              user_id
            }
          })
            .then(res => {
              console.log(res)
              const _data = res.data
              if (_data.State.Code == 200) {
                this.$notify({
                  title: "提示",
                  message: "已经成功提交了审核...",
                  type: "success"
                })
              }
              if (_data.State.Code == 2003) {
                this.$notify.error({
                  title: "对不起...",
                  message: "此账户已经关联了公司"
                })
              }

              this.disabled = true
            })
            .catch(err => {
              console.log(err)
            })
        } catch (error) {
          console.log("个人用户升级为企业用户接口出现问题...")
        }
      } else {
        return
      }
    },

    // 修改企业资料
    submitForm(formName) {
      this.base64()
      if (
        formName.companyName &&
        this.ruleForm.industry.name &&
        formName.businessLicense
      ) {
        // 不能为空
        const UserInfor = this.$store.state.UserInfor
        const user_id = UserInfor.user_id
        // 企业的营业执照的存储版本  首先在获取的时候先存放在vuex中
        let license = this.$store.state.license // 老的营业执照
        let status = "companyUpdate" // 状态码
        let param = {
          name: formName.companyName,
          industry_id: this.ruleForm.industry.name,
          nature_id: this.ruleForm.companyNature.name,
          license: formName.businessLicense
        }
        console.log(param, user_id, license)
        try {
          this.$http({
            method: "post",
            url: `index/web/doSelfInfos`,
            // headers: {'X-Requested-With': 'XMLHttpRequest'},    // 必须加这个请求头 否则报错：500
            data: {
              param,
              user_id,
              license,
              status
            }
          })
            .then(res => {
              console.log(res)
              const _data = res.data
              if (_data.State.Code == 200) {
                this.$notify({
                  title: "提示",
                  message: "已经成功提交了审核... ",
                  type: "success"
                })
              }
              if (_data.State.Code == 2003) {
                this.$notify.error({
                  title: "对不起...",
                  message: "此账户已经关联了公司"
                })
              }

              this.disabled = true
            })
            .catch(err => {
              console.log(err)
            })
        } catch (error) {
          console.log("修改企业资料接口出现了问题...")
        }
      } else {
        return
      }
    }
  },
  created() {

  },
  mounted() {
    this.httpInit() // 公司性质 所属行业 数据更新
    this.dataInit()
    this.getInfor()
    // console.log(this.$store.state.userStatus)
  }
}
</script>


<style lang="scss" scoped>
// 企业信息
.changeAvatar {
  /deep/ .el-form {
    padding-bottom: 60px;
    width: 500px;
    margin: auto;
    .el-form-item {
      .code {
        display: flex;
        flex-direction: row;
        .el-input {
          width: 60%;
        }
        .el-button {
          margin-left: 5px;
        }
        .register {
          width: 300px;
        }
      }
      /deep/ .el-checkbox {
        margin-left: 0px;
        margin-right: 20px;
      }
    }
    .jumplogin {
      text-align: right;
      padding-right: 138px;
      span {
        color: #ff7200;
        cursor: pointer;
      }
    }
  }
}
</style>
